<template>
	<div class="position">
		<span class="iconfont position__icon">&#xe60e;</span>
		北京理工大学国防科技园 北京理工大学国防科技园 北京理工大学国防科技园
		<span class="iconfont position__notice">&#xe650;</span>
	</div>
	<div class="search">
		<span class="iconfont">&#xe65c;</span>
		<span class="search__text" >123123123123</span>
	</div>
	<div class="banner">
		<img class="banner__img" src="http://www.dell-lee.com/imgs/vue3/banner.jpg" />
	</div>
	<div class="icons">
		<div class="icons__item"
			v-for="item in iconList">
			<img class="icons__item__img" :src="item.imgSrc" />
			<p class="icons__item__desc">{{ item.desc }}</p>
		</div>
	</div>
	<div class="gap"></div>
</template>

<script type="text/javascript">
	export default{
		name: 'StaticPart',
		setup(){
			const iconList=[
				{imgSrc:'http://www.dell-lee.com/imgs/vue3/超市.png',desc:'超市便利'},
				{imgSrc:'http://www.dell-lee.com/imgs/vue3/水果店.png',desc:'水果店'},
				{imgSrc:'http://www.dell-lee.com/imgs/vue3/鲜花.png',desc:'鲜花绿植'},
				{imgSrc:'http://www.dell-lee.com/imgs/vue3/医药健康.png',desc:'医药健康'},
				{imgSrc:'http://www.dell-lee.com/imgs/vue3/家居.png',desc:'家居时尚'},
				{imgSrc:'http://www.dell-lee.com/imgs/vue3/蛋糕.png',desc:'烘培蛋糕'},
				{imgSrc:'http://www.dell-lee.com/imgs/vue3/签到.png',desc:'签到'},
				{imgSrc:'http://www.dell-lee.com/imgs/vue3/大牌免运.png',desc:'大牌免运'},
				{imgSrc:'http://www.dell-lee.com/imgs/vue3/红包.png',desc:'红包套餐'},
				{imgSrc:'http://www.dell-lee.com/imgs/vue3/菜市场.png',desc:'菜市场'}
			]
			return{iconList}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../style/iconfont.css";
	@import "../../style/mixins.scss";
	@import '../../style/viriables.scss';
	.position {
		position: relative;
		padding: 0.16rem 0.24rem 0.16rem 0;
		line-height: 0.22rem;
		font-size: 0.16rem;
		@include ellipse;
	
		.position__icon {
			position: relative;
			font-size: 0.16rem;
		}
	
		.position__notice {
			position: absolute;
			font-size: 0.18rem;
			right: 0;
			top: 0.17rem;
		}
	
		color: $content-fontcolor;
	}
	
	.search {
		margin-bottom: 0.12rem;
		vertical-align: middle;
		line-height: 0.32rem;
		background-color: #f5f5f5;
		color: $search_fontcolor;
		border-radius: 0.16rem;
		font-size: 0.14rem;
		padding: 0 0.14rem 0 0.12rem;
	
		.iconfont {
			font-size: 0.16rem;
			padding: 0 0.05rem 0 0.06rem;
		}
        &__text {
            display: inline-block;
            font-size: .14rem;
        }
	}
	
	.banner {
		&__img {
			width: 100%;
		}
	}
	
	.icons {
		margin-top: .16rem;
		display: flex;
		flex-wrap: wrap;
	
		&__item {
			width: 20%;
	
			&__img {
				display: block;
				width: .4rem;
				height: .4rem;
				margin: 0 auto;
			}
	
			&__desc {
				margin: .06rem 0 .16rem 0;
				text-align: center;
				color: $content_fontcolor;
			}
		}
	}
	
	.gap {
		margin: 0 -.18rem;
		height: .1rem;
		background: $content-bgcolor;
	}
	
</style>